<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="chart" style="width:500px;height:400px"></div>
		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>
		<script>
			var myChart = echarts.init(document.getElementById('chart'));

			// 指定图表的配置项和数据
			var options = {
				title: {
					text: 'ECharts 入门示例',
					textStyle:{
						color:"#444"
					}
					
				},
				tooltip: {},
				grid:{
					
					
				},
				legend: {
					data: ['销量',"价格"]
				},
				xAxis: {
					data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
					 nameRotate:45
				},
				yAxis: {
					nameTextStyle:{
						color:'red'
					}
				},
				dataZoom:[
					{
						type:"inside",
						start:0,
						end:100
					},
					{
						type:"slider",
						start:0,
						end:100
					}
				],
				series: [{
					name: '销量',
					type: 'bar',
					data: [50, 20, 36, 10, 10, 20]
				},
					{
						name: '价格',
						type: 'line',
						data: [100, 300, 260, 700, 400, 200]
					}
				]
			};
			
			
			var data=[
				{
					id:1,
					sale:100,
					price:50
				},
				{
					id:2,
					sale:200,
					price:80
				},
				{
					id:3,
					sale:500,
					price:50
				}
			] 
			// 封装一个函数  行装列  
			function row2Col(dataList,key,title){
				/* 
				返回：
					{
						name:传入的title,
						data:字段所有的数据 是一个数组
					}
				
				 */
				let obj = {};
				
				let keys = Object.keys(dataList[0]);
				let index = keys.indexOf(key);
				console.log(index);
				var arr = [];
				dataList.forEach(el=>{
					// console.log(Object.values(el))
					arr.push(Object.values(el)[index])
				})
				obj = {
					title : title,
					data:arr
				}
				return obj;
			}
			console.log(row2Col(data,"price","价格"));
			console.log(row2Col(data,"sale","销量"));
			/* 
			row2Col(data,'price',"价格");
			data:[
				{
					id:1,
					sale:100,
					price:50
				},
				{
					id:2,
					sale:200,
					price:80
				},
				{
					id:3,
					sale:500,
					price:50
				},
			] 
			 */
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(options);
			/* 
			配置项手册：
				title
				legend
				x轴
				y轴
				dataZoom
				visualMap
				tooltip
				series
			 */
		</script>
	</body>
</html>
